<template>
    <div class="report" style="background-color: white">
        <div>
            <div>
                <div style="margin-bottom: 20px">
                    社保申报数据
                </div>
                <div style="display: flex;justify-content: space-between;">
                    <div class="left" style="width:180px;">
                        <div class="title">
                            <el-statistic title="申报人数" :value="declarationTotalValue" />

                        </div>
                        <div class="report-statistic">
                            <el-statistic title="待申报(人)" :value="toDeclareTotalValue" />
                            <el-statistic title="申报中(人)" :value="declaringTotalValue" />
                            <el-statistic title="已申报(人)" :value="declaredTotalValue" />
                        </div>
                    </div>
                    <div class="right">
                        <div id="container2" style="height: 100%"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue';
import * as echarts from "echarts";
import { gethomeData, getMessage } from '@/api/home'
import { useRoute } from 'vue-router'
const route = useRoute()
defineProps(['declarationTotalValue', 'declaredTotalValue', 'declaringTotalValue', 'toDeclareTotalValue'])
onMounted(() => {
    if (route.path == '/index') {
        gethomeData().then(res => {
            var dom = document.getElementById("container2");
            var myChart = echarts.init(dom, null, {
                renderer: "canvas",
                useDirtyRect: false,
            });
            var option;
            option = {
                legend: {
                    lineStyle: {
                        width: 0
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: res.data.data.socialInsurance.xAxis,
                    axisLine: {
                        show: false  // 设置为 false 取消轴线显示
                    },
                    axisTick: {
                        show: false  // 设置为 false 取消刻度线显示
                    }
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: res.data.data.socialInsurance.yAxis,
                        type: 'line',
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: 'rgba(182, 237, 234)' },   // 渐变起始颜色
                                { offset: 1, color: 'rgba(233, 254, 254)' }  // 渐变结束颜色
                            ])
                        },
                        lineStyle: {
                            color: 'rgb(126, 227, 220)' //设置连接线段的颜色
                        },
                        showSymbol: false //取消显示标记点
                    }
                ]
            };
            if (option && typeof option === "object") {
                myChart.setOption(option);
            }
        });
    }
})

</script>

<style scoped>
#container {
    width: 100%;
    height: 500px;
}
</style>